<template>
<div>
    <KDialog width="60%" height="auto" v-model:showDialog="backgroundImg.showDialog">
      <template #header>
        <div style="font-size: 20px;font-family: 'Roboto Slab', serif;">
          选择背景图片
        </div>
      </template>
      <div>
        <div class="row">
          <div class="col-4 col-12-medium" v-for="(c, index) in backgroundImg.predefinedImg" :key="index">
            <div style="padding : 20px;">
              <mainImg :imgUrl="c" style="cursor: pointer;" @click="backgroundImg.changeBackgroundImg(c)"></mainImg>
            </div>
          </div>

        </div>
      </div>
      <br>
      <div align="right">
        <button @click="backgroundImg.showDialog = false;" style="margin:0 10px;">OK</button>
      </div>
    </KDialog>

    <KCard>
    <template #header>
      <div style="display: flex; justify-content: space-between;">
        <span class="MyFont" style="font-size: 25px;color:rgb(61,68,73);">AI 创新班作业网站</span>
        <el-tooltip
                class="box-item"
                effect="dark"
                content="来个star吧 :D"
                placement="left-start"
        ><a
          class="icon solid fa-star button primary"
          style="
            font-size: 12px;
            margin-top: 20px;
            margin-right: 10px;
            border-radius: 1.5em;
          "
          href="https://gitee.com/li1553770945/home-work-fe"
          target="_blank"
        >
          star
        </a></el-tooltip>
      </div>
      <img
        style="margin-left: 15px"
        src="https://img.shields.io/badge/FE-vue3.js-green"
      />
      <img
        style="margin-left: 15px"
        src="https://img.shields.io/badge/BE-gin-red"
      />
      <img
        style="margin-left: 15px"
        src="https://img.shields.io/badge/version-1.3-purple"
      />
    </template>
    <div style="padding: 20px">
      <div v-for="(c, index) in todos.contents" :key="index">
        <input type="checkbox" :id="index" v-model="c.fin" />
        <label :for="index">{{ c.text }}</label>
      </div>
    </div>
      <div style="display: flex; align-items: center">
          <el-color-picker
            @change="themeColor.handleChange"
            v-model="themeColor.rgba"
            show-alpha
            :predefine="themeColor.predefineColors"
          />
          <span
            style="
              margin-left: 16px;
              font-size: 18px;
              font-family: 'Roboto Slab', serif;
            "
          >
            根据你的心情自由地调色
          </span>
          <el-divider direction="vertical" content-position="left"></el-divider>
          
          <button @click="backgroundImg.showDialog = true" style="font-size:12px;">change bg</button>

                    <el-dropdown 
            style="padding: 5px" 
          >
          <el-divider direction="vertical" content-position="left"></el-divider>

          <button class="button primary MenuItem">
              <i class="icon solid fa-tools"></i> <span style="font-family: 'Roboto Slab'">SETTING</span>
            </button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item >
                  <label class="InputLabel" 
                  :style="`font-size: 16px;margin:0 10px 0 0;color:${config.textAreaMove ? 'var(--mainColor)' : 'black'}`"
                  >
                  允许拖动块状编辑区域
                  </label>
                  <el-switch v-model="config.textAreaMove" @click="config.handletextAreaMove"/>
                </el-dropdown-item>
                <el-dropdown-item>
                    <span class="sliderCaption">背景透明度</span>
                    <el-slider :min="0" :max="1" :step="0.01" v-model="config.opacity" />
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-divider direction="vertical" content-position="left"></el-divider>
          <button class="icon solid fa-save" style="font-size:12px;" @click="save">SAVE</button>
      </div>
    <el-divider direction="horizontal" content-position="center"></el-divider>
    <br />

    <section>
      <LastestDDL></LastestDDL>
    </section>

  </KCard>
</div>

</template>

<script>
import { reactive, computed, watch, onMounted, h, ref } from "vue";
import { useStore } from "vuex"
import { parseRGBA, hsv2rgb, rgb2hsv } from "@/hook/colormap";
import hello from "@/hook/greet";
import { ElNotification } from "element-plus"
import LastestDDL from "@/pages/Home/LastestDDL"

export default {
  name: "home",
  components : {
    LastestDDL
  },
  setup() {
    let store = useStore()

    // TODO : dump remove


    onMounted(() => {
      setTimeout(hello, 300);
      let clearEl = document.getElementsByClassName(
        "el-button el-button--text el-button--small el-color-dropdown__link-btn"
      );
      let okEl = document.getElementsByClassName(
        "el-button el-button--small is-plain el-color-dropdown__btn"
      );
      clearEl = clearEl[0].children[0];
      okEl = okEl[0].children[0];
      clearEl.remove();
      okEl.innerHTML = "确定";
    });


    let todos = reactive({
      contents: [
        { fin: true,  text: "前端: 完成nuaa ai作业网站的vue3重构" },
        { fin: true, text: "后端: 完成基本API的重建" },
        { fin: true, text: "功能: 每个作业的截至进度" },
      ],
    });


    let themeColor = reactive({
      rgba: store.state.curGlobalColor,
      lastRgba: store.state.curGlobalColor,
      predefineColors: [
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
        "rgba(255, 69, 0, 0.68)",
        "rgb(255, 120, 0)",
        "hsv(51, 100, 98)",
        "hsva(120, 40, 94, 0.5)",
        "hsl(181, 100%, 37%)",
        "hsla(209, 100%, 56%, 0.73)",
        "#c7158577",
      ],
      handleChange() {
      },
      changeThemeColor() {
        if (themeColor.rgba == null || themeColor.rgba == undefined) {
          themeColor.rgba = themeColor.lastRgba;
          ElMessage({
            message: "不选择任何颜色, 自动回到上次颜色选项",
            type: "warning",
          });
          return;
        }
        if (themeColor.rgba != themeColor.lastRgba) {
          themeColor.lastRgba = themeColor.rgba;
          let rgb = parseRGBA(themeColor.rgba);
          let red = rgb[0],
            green = rgb[1],
            blue = rgb[2];
          let shadowRgba = `rgba(${Math.min(255, red + 50)}, ${Math.min(
            255,
            green + 50
          )}, ${Math.min(255, blue + 50)}, 0.99)`;
          let transplateRgba = `rgba(${red}, ${green}, ${blue}, 0.1)`;

          let hsv = rgb2hsv([red, green, blue]);
          hsv[1] = 0.05;
          rgb = hsv2rgb(hsv);
          let lightRgba = `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0.7)`;

          document.body.style.setProperty("--mainColor", themeColor.rgba);
          document.body.style.setProperty("--shadowColor", shadowRgba);
          document.body.style.setProperty("--transplantColor", transplateRgba);
          document.body.style.setProperty("--lightColor", lightRgba);
          document.body.style.setProperty("--el-color-primary", themeColor.rgba);
          
          store.commit("CHANGEGOLOBALCOLOR", { rgba: themeColor.rgba });

          ElNotification({
            title: "主题色修改成功!",
            message: h(
              "i",
              { style: "color:" + themeColor.rgba },
              "换种心情, 是为了更好地解析 :D"
            ),
            duration: 5000,
          });
        } else {
        }
      },
    });

    let config = reactive({
      textAreaMove : store.state.textAreaMove,
      opacity : store.state.opacity,
      handletextAreaMove() {
        store.state.textAreaMove = config.textAreaMove
      }
    })

    watch(() => themeColor.rgba, () => {
      themeColor.changeThemeColor()
    })


    watch(() => config.opacity, () => {
      document.body.style.setProperty("--backTransplate", config.opacity)
      store.state.opacity = config.opacity
    })
    
    let backgroundImg = reactive({
      showDialog : false,
      uploadImg : "",
      predefinedImg : [
        "https://cdn.jsdelivr.net/gh/LSTM-Kirigaya/KImage/Img/064814eiq91mlauteped1z.jpg",
        "https://cdn.jsdelivr.net/gh/LSTM-Kirigaya/KImage/Img/3840x2160.png",
        "https://cdn.jsdelivr.net/gh/LSTM-Kirigaya/KImage/Img/24114612_e9bf742d47.jpeg",
        "https://cdn.jsdelivr.net/gh/LSTM-Kirigaya/KImage/Img/2k.jpg",
        "https://cdn.jsdelivr.net/gh/LSTM-Kirigaya/KImage/Img/Xingchen.full.3078330.png",
        "https://cdn.jsdelivr.net/gh/LSTM-Kirigaya/KImage/Img/Xingchen.full.2132001.png",
        "https://pic3.zhimg.com/v2-b7408711f99a5dc49decc3ce0aee6ac6_r.jpg",
        "https://cdn.jsdelivr.net/gh/LSTM-Kirigaya/KImage/Img/science.jpg",
        "https://cdn.jsdelivr.net/gh/LSTM-Kirigaya/KImage/Img/325190.jpg",
      ],
      changeBackgroundImg(imgUrl) {
        if (imgUrl !== undefined && imgUrl !== "") {
          document.body.style.backgroundImage = `url(${imgUrl})`
          store.state.backgroundImg = imgUrl
        }
        ElNotification({
          title : "切换图片成功！",
          message : "欣赏你喜欢的范式吧！"
        })
      }
    })

    function save() {
      if (store.state.hasLogin) {
        let configJson = {
          curGlobalColor : store.state.curGlobalColor,
          backgroundImg : store.state.backgroundImg,
          opacity : store.state.opacity,
          textAreaMove : store.state.textAreaMove
        }
        let configString = JSON.stringify(configJson)
        store.dispatch("updateConfig", { config : configString }).then(() => {
          if (store.state.opSuccess === true) {
            store.state.opSuccess = undefined
            ElNotification({title: "配置信息保存成功！"})
          }
          else {
            ElNotification({title: "配置信息保存失败", message: "失败信息: " + store.state.error})
          }
        })
      }
      else {
        ElNotification({title: "Wrong", message: "你还没有登陆，无法保存信息！"})
      }
    }

    return {
      todos,
      themeColor,
      backgroundImg,
      config,
      save
    };
  },
};
</script>

<style>
.MyFont {
  font-family: "Roboto Slab", serif;
  padding: 20px;
}

.sliderCaption {
  font-family: "Roboto Slab", serif;
  font-size: 16px;
  margin:0 10px 0 0
}
</style>